<!DOCTYPE html>
<html lang="ch-zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <title>email-trending</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-image: url('http://cn.images.allwees.com/allwees/7f8680cf865c4774ef87b87e3358b057.jpg');
            font-size: 14px
        }

        h3 {
            color: #333;
            font-size: 15px
        }

        a:hover {
            text-decoration: none
        }

        .bg-white-color {
            background: #fff
        }

        .bg-gray-color {
            background: #E8E8E8
        }

        .brown-color {
            color: #90521D
        }

        .red-color {
            color: #CA2D2E
        }

        .black-light-color {
            color: #676767
        }

        .red-deep-color {
            color: #EA4D49
        }

        .shadow {
            box-shadow:0px 0px 4px 0px rgba(0,0,0,0.12);
        }

        .f-18 {
            font-size: 18px
        }

        .f-12 {
            font-size: 12px
        }

        .f-13 {
            font-size: 13px
        }

        .f-20 {
            font-size: 20px
        }

        .f-19 {
            font-size: 19px
        }

        .f-22 {
            font-size: 22px
        }

        .p-30 {
            padding: 30px
        }

        .p-10 {
            padding: 10px
        }

        .p-15 {
            padding: 15px
        }

        .m-b-0 {
            margin-bottom: 0px
        }

        .m-b-5 {
            margin-bottom: 5px
        }

        .m-b-10 {
            margin-bottom: 10px
        }
        .m-b-20 {
            margin-bottom: 20px
        }

        .m-b-30 {
            margin-bottom: 30px
        }

        .m-t-5 {
            margin-top: 5px
        }

        .m-t-10 {
            margin-top: 10px
        }

        .m-t-20 {
            margin-top: 20px
        }

        .m-t-30 {
            margin-top: 30px
        }

        .m-r-10 {
            margin-right: 10px
        }

        nav {
            height: 72px;
            background-repeat: no-repeat;
            background-image: url('http://cn.images.allwees.com/allwees/06999c7ddbd72f6e4f63c5ade11db992.jpg');
            background-size: cover;
            background-color: #ea4c49;
            padding: 0 30px;

        }

        nav img {
            height: 36px;
        }

        nav {
            color: #fff
        }


        .about-order {
            height: 279px;
            background: #f7f7f7;
        }

        .order-time {
            padding: 0 20px;
            height: 74px;
            border-bottom: 1px solid #fff;
        }

        .order-time ul {
            padding: 10px 0;
        }

        .order-time ul li {
            font-size: 13px;
            color: #333;
            line-height: 18px;
            list-style: none;
        }

        .order-time ul li:nth-child(1) span:nth-child(2) {
            color: #549EF3;
            word-wrap: break-word;
            display: inline-block;
            width: 63%;
        }

        .order-time ul li span:nth-child(1) {
            display: inline-block;
            width: 80px;
        }

        .order-time ul li span:nth-child(2) {
            margin-left: 3.8%;
        }

        .order-basic {
            padding: 0 20px;
            height: 110px;
            border-bottom: 1px solid #fff;
        }

        .order-basic dl {
            padding: 10px 0;
        }

        .order-basic dl dt {
            width: 90px;
            height: 90px;
            border-radius: 3px;
            float: left;
        }

        .order-basic dl dt img {
            width: 100%;
            height: 100%;
            border-radius: 3px;
        }

        .order-basic dl dd {
            padding-left: 100px;
        }

        .order-basic dl dd p:nth-child(1) {
            font-size: 14px;
            color: #549EF3;
            line-height: 21px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .order-basic dl dd p:nth-child(2) {
            font-size: 12px;
            color: #666;
            line-height: 17px;
            margin-bottom: 10px;
        }

        .order-basic dl dd p:nth-child(3) {
            font-size: 14px;
            color: #111;
            line-height: 20px;
            font-weight: bold;
        }

        .order-price {
            padding: 0 20px;
            height: 93px;
        }

        .order-price ul {
            padding: 10px 0;
            width: 100%;
            float: right;
            text-align: right;
        }

        .order-price ul li {
            font-size: 14px;
            color: #111;
            line-height: 21px;
            width: 100%;
            list-style: none;
        }

        .order-price ul li:nth-child(2) {
            margin: 5px 0;
        }

        .order-price ul li:nth-child(3) {
            font-weight: bold;
        }

        .order-price ul li span:nth-child(1) {
            display: inline-block;
            width: 120px;
            margin-right: 28.8%;
            text-align: right;
        }

        .card-image {
            height: 210px;
            border-radius: 4px 4px 0 0;
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .btn-danger {
            font-size: 20px;
            background-color: #EA4D49;
            border-color: #EA4D49;
        }

        .btn-danger:hover {
            background-color: #e62638;
            border-color: #e62638;
        }

        .btn a {
            color: #fff;
            text-decoration: none
        }

        .h-110 {
            height: 110px;
        }

        .icon-list li {
            display: inline-block;
            height: 30px;
            width: 30px;
            margin-right: 10px
        }
        .icon-list li a,.icon-list li a img  {
            height: 100%;
            width: 100%;
        }

          @media screen and (max-width: 768px) {
            .wrap-email{
                width:100%;
            }
            .order-price ul {
                padding: 10px 0;
                /* width: 58.7%!important; */
            }
            .card-image {
                height: 140px;
            }
            .col-sm-6, .col-6 {
                padding: 0 5px!important
            }
        }
       
        
    </style>
</head>

<body>
    <div class="container">
        <nav class="d-flex align-items-center">
            <div class="mr-auto p-2">
                <img src="http://cn.images.allwees.com/allwees/cfdd786185af165a7872d6fe333b6301.jpg">
            </div>
            <div class="p-2">
                <span>Share more, Save more!</span>
            </div>
        </nav>

        <section class="bg-white-color shadow p-30">
            <h2 class="brown-color f-18 m-t-20">Dear ${firstName}</h2>
            <p class="m-b-0">${message}</p>
            <a href="${orderDetailsURL}" class="" target="_blank">Check the order details</a>

            <h3 class="m-t-10">Order detail</h3>
            <div class="about-order">
                <div class="order-time">
                    <ul>
                        <li>
                            <span>Order #</span>
                            <span>${orderUuid}</span>
                        </li>
                        <li>
                            <span>Order Placed</span>
                            <span>${orderCreatedAt}</span>
                        </li>
                        <#if orderPaymentAt??>
                            <li>
                                <span>Payment At</span>
                                <span>${orderPaymentAt}</span>
                            </li>
                        </#if>
                    </ul>
                </div>
                <div class="order-basic">
                    <dl>
                        <dt>
                            <img src="${productPhoto}" alt="">
                        </dt>
                        <dd>
                            <p class="item-goods-name f-15">${productName}</p>
                            <p class="item-goods-size f-13">
                                <#if color??>
                                    <span>${color} </span>
                                </#if>
                                <#if size??>
                                    <span>${size} </span>
                                </#if>
                            </p>

                            <p class="item-goods-price f-13">$${price}*${sum}</p>
                        </dd>
                    </dl>
                </div>
                <div class="order-price">
                    <ul>
                        <li>
                            <span>Goods price</span>
                            <span>$${price}</span>
                        </li>
                        <li>
                            <span>Estimated Shipping</span>
                            <span>$${amtShipping}</span>
                        </li>
                        <li>
                            <span>Order Total</span>
                            <span>$${amt}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <p class="red-color f-12">Please be aware that we would never request you to repay for any reason. If you should find any account exception,
                please contact us immediately.</p>

            <p class="m-b-10">Hint: please understand that the ordered items may not be delivered due to out of stock in some cases, even the
                delivery time is estimated for the order</p>
            <p class="f-13 m-b-10">Please click here to review the
                <a href="https://mobile.allwees.com/returnPolicy">return policy</a>
            </p>
            <p class="f-13 m-b-10">Looking forward to your visit again!</p>

        </section>

        <section class="bg-white-color shadow p-30 m-t-5 text-center">
            <h2 class="f-22 m-b-30">Today's Trending Products</h2>

            <div class="row">
                <div class="col-md-3 col-sm-6 col-6">
                    <div>
                        <div class="card-image" style="background-image: url('https://staging.images.allwees.com/product/hQWwBRxD3b6C5XmKnySbhRNxQyCbKs.png')"></div>
                        <p class="m-t-10 red-deep-color f-20 m-b-30">${goodsPrice}</p>
                    </div>
                </div>


                <div class="col-md-3 col-sm-6 col-6">
                    <div>
                        <div class="card-image" style="background-image: url('https://staging.images.allwees.com/product/hQWwBRxD3b6C5XmKnySbhRNxQyCbKs.png')"></div>
                        <p class="m-t-10 red-deep-color f-20 m-b-30">${goodsPrice}</p>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-6">
                    <div>
                        <div class="card-image" style="background-image: url('https://staging.images.allwees.com/product/hQWwBRxD3b6C5XmKnySbhRNxQyCbKs.png')"></div>
                        <p class="m-t-10 red-deep-color f-20 m-b-30">${goodsPrice}</p>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-6">
                    <div>
                        <div class="card-image" style="background-image: url('https://staging.images.allwees.com/product/hQWwBRxD3b6C5XmKnySbhRNxQyCbKs.png')"></div>
                        <p class="m-t-10 red-deep-color f-20 m-b-30">${goodsPrice}</p>
                    </div>
                </div>

            </div>

            <button type="button" class="btn btn-danger m-t-20 m-b-20">
                <a href="${url}">&nbsp;&nbsp;&nbsp;&nbsp;SHOP NOW&nbsp;&nbsp;&nbsp;&nbsp;</a>
            </button>
        </section>

      

        <section class="bg-gray-color shadow text-center h-110 d-flex">
            <div class="m-auto">
                <p class="m-b-10 black-light-color">DOWNLOAD OUR APP</p>
                <a href="https://itunes.apple.com/us/app/allwees/id1388263144?l=zh&ls=1&mt=8" class="m-r-10">
                    <img src="http://cn.images.allwees.com/allwees/46a9372e183cd0ec2ebcd31cee0c25d8.jpg" alt="app store">
                </a>
                <a href="https://play.google.com/store/apps/details?id=com.yinzheng.allwees">
                    <img src="http://cn.images.allwees.com/allwees/831e4a08014e89c9aec72f2e8182cab4.jpg" alt="google play">
                </a>
            </div>
        </section>
        <section class="bg-white-color text-center h-110 d-flex">
            <div class="m-auto icon-list">
                <ul>
                    <li>
                        <a href="https://www.facebook.com/allweesstore">
                            <img src="http://cn.images.allwees.com/allwees/3a3c907a7a756e832ef5d4877022bc3d.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="https://twitter.com/allweesstore">
                            <img src="http://cn.images.allwees.com/allwees/c44ce87c3263092e4e185f752939f0d0.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.instagram.com/allweesstore">
                            <img src="http://cn.images.allwees.com/allwees/8a25100ca8c9ed687afbfe0963c16043.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.pinterest.com/allwees">
                            <img src="http://cn.images.allwees.com/allwees/3d472116375f6b34cb148f12302bc9fc.jpg" alt="">
                        </a>
                    </li>
                </ul>

            </div>
        </section>
    </div>
</body>

</html>